<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import request from 'umi-request'
const username = 'Knight174'

interface AxiosVue {
  user: object
  loading: boolean
}

const state: AxiosVue = reactive({
  user: {},
  loading: true
})

const fetchUser = async (username: string) => {
  return request(`https://api.github.com/users/${username}`)
}
onMounted(async () => {
  try {
    const result = await fetchUser(username)
    console.log(result)
    // state.user = { ...data }
    state.loading = false
  } catch (err) {
    throw new Error(err as string)
  }
})
</script>

<template>
  <h1>Hello, Axios!</h1>
  <img src="../../assets/icons/user.svg" alt="提示" />
  <div class="content" v-loading="state.loading">
    {{ state.user }}
  </div>
</template>

<style scoped lang="less">
@import '@/styles/variable.less';

.content {
  width: 500px;
  min-height: 500px;
  margin: auto;
  border: 1px solid @red;
}
</style>
